<template>
  <div>
    <rx-fit style="padding-top: 6px">
      <template #toolheader foldbtn="false" border="false">
        <div class="table-containers">
          <div class="header-toolbar">
            <a-form-model layout="inline" style="display: flex">
              <a-form-item :label="i18n('isShowView','是否开启视图')">
                <a-switch v-model="isShowView" size="small"/>
              </a-form-item>
              <a-form-item :label="i18n('showSearchViewStyle','查询视图风格')">
                <a-radio-group placeholder="查询视图风格" v-model="showSearchViewStyle">
                  <a-radio value="NO">{{i18n('styleOpt.NO','默认收起')}}</a-radio>
                  <a-radio value="YES">{{i18n('styleOpt.YES','放列表顶部tab标签')}}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-form-model>
          </div>
          <div class="btn-box">
            <a-space style="margin-bottom: 10px">
              <a-button @click="showSearchViewEdit()" type="primary" :size="'small'">{{i18n('addSearchView','新增查询视图')}}</a-button>
              <a-button @click="removeRow" :size="'small'" :type="'danger'" style="margin-left: 10px" >{{$ti18('rxList.delBtn','删除')}}</a-button>
            </a-space>
          </div>
          <rx-grid
              ref="table"
              :dataSource="viewFields"
              :columns="viewColumns"
              :allowRowSelect="true"
              :multiSelect="true"
              :showPage="false"
              :bordered="true"
              id-field="idx_"
              style="min-height:300px;"
          >
      <span slot="defautView" slot-scope="{ text, record, index }">
        <a-switch @change="defaultViewChange($event,record)" v-model="record.defaultView"/>
      </span>
            <span slot="searchViewSetting" slot-scope="{ text, record, index }">
        <a-button @click="showSearchViewEdit(record)">{{$ti18('rxList.editBtn','编辑')}}</a-button>
      </span>
          </rx-grid>
        </div>
      </template>
    </rx-fit>
  </div>
</template>

<script>
  import {RxGrid, GridMixin, BaseForm,Dialog} from "@lowcode/jpaas-common-lib"

  export default {
    name: "Edit2SearchViewConf",
    mixins: [GridMixin, BaseForm],
    components: { RxGrid },
    props: {
      defaultValue: { type: Object, default: () => {} },
      fieldDataAll: { type: Array, default: () => [] }
    },
    data(){
      return {
        showSearchViewStyle: "NO",
        isShowView: true,
        viewFields: [],
        viewColumns: [
          {
            title: this.i18n('name','查询视图名称'),
            dataIndex: 'name',
            width: 120,
          },
          {
            title: this.i18n('defautView','设置为默认视图'),
            dataIndex: 'defautView',
            scopedSlots: {customRender: 'defautView'},
            width: 120,
          },
          {
            title: this.i18n('searchViewSetting','查询视图配置'),
            dataIndex: 'searchViewSetting',
            scopedSlots: {customRender: 'searchViewSetting'},
            width: 120,
          },
        ],
        curRecord: {},
        maxSn:0,
        opData:[
          {label: this.i18n('opData.EQ','等于'),value:'EQ'},
          {label:this.i18n('opData.NEQ','不等于'),value:'NEQ'},
          {label:this.i18n('opData.LK','模糊'),value:'LK'},
          {label:this.i18n('opData.LEK','左模糊'),value:'LEK'},
          {label:this.i18n('opData.RIK','右模糊'),value:'RIK'},
          {label:this.i18n('opData.ISNULL','为空'),value:'ISNULL'},
          {label:this.i18n('opData.NOTNULL','不为空'),value:'NOTNULL'}
        ]
      }
    },
    mounted() {
      const { viewList, isShowView, showSearchViewStyle } = this.defaultValue
      this.isShowView = isShowView === 'YES' || isShowView === undefined
      this.showSearchViewStyle = showSearchViewStyle || 'NO'
      this.viewFields = viewList ? [...viewList] : []
    },
    methods:{
      i18n(name,text,key){
        return this.$ti18(name,text,"formCodegenBusiness.edit2.SearchViewConf",key);
      },
      defaultViewChange(checked, record) {
        var table = this.$refs.table;
        var rows = table.getData();
        for (var i = 0; i < rows.length; i++) {
          table.updateRow(rows[i], {defaultView: false});
        }
        record.defaultView = checked;
      },
      removeRow() {
        var table = this.$refs.table
        table.removeRows()
        table.selectedRowKeys = []
        table.selectedRows = []
        this.handDataSourceSn();
        this.$forceUpdate()
      },
      handDataSourceSn(){
        this.viewFields.forEach(item=>{
          if(item.sn>this.maxSn){
            this.maxSn=item.sn;
          }
        })
      },
      validName(name){
        var ary=this.viewFields.filter(item=>{
          return item.name==name;
        })
        return ary.length>0;
      },
      showSearchViewEdit(record) {
        var self = this;
        var conf = {
          curVm: this,
          data: {
            record: record,
            fieldDatas: this.fieldDataAll.map(item=>{
              return {fieldName:item.fieldName,fieldLabel:item.comment,fc:'textbox',opData:this.opData}
            }),
            validFunc:function(data){
              if((!record || record.name!=data.name) && self.validName(data.name)){
                self.$message.error(this.i18n('msg.notRep',"查询视图名称不能重复！"));
                return false;
              }
              return true;
            }
          },
          widthHeight: ['800px', '400px'],
        }
        Dialog.openSearchViewContent(conf,function(data){
          if (!record) {
            self.viewFields.push({
              name: data.name,
              defaultView: false,
              sn:++self.maxSn,
              queryCondition: JSON.stringify(data.queryCondition)
            });
          } else {
            record.name = data.name;
            record.queryCondition = JSON.stringify(data.queryCondition);
          }
        })
      },
      collectData() {
        let result={success:true};
        const tableData = this.$refs.table.getData()
        const { isShowView, showSearchViewStyle } = this
        const config = {
          viewList: tableData,
          isShowView: isShowView ? 'YES' : 'NO',
          showSearchViewStyle: showSearchViewStyle
        }
        result.data=config;
        return result;
      }
    }
  }
</script>

<style scoped>
  .search-view-seted-box {
    margin: 10px 0px;
  }
</style>